<script setup>
import { ref,reactive, onMounted } from 'vue'
import {all,create,update,updatePermission,allAccess,allMenu,updateMenu}  from '../../api/role.js'
import { ElMessage } from 'element-plus'

const state = reactive({
	roles:'',
	form:{},
  access:[],
  edit_form:{},
  access_form:[],
  all_access:[],
  all_menu:[]
});
const visible = ref(false);
const edit_visible = ref(false);
const access_visible = ref(false);
const menu_visible = ref(false);

const handleSetDown = ()=>{

}
const add = ()=>{
		visible.value  = true;
}
const del = ()=>{

}
onMounted(()=>{
 	all().then(res=>{
 		if(res.code == 200) {
 			state.roles = res.data
 		}
 	});
  allAccess().then(res=>{
    if(res.code == 200) {
      state.all_access = res.data
    }

  })
  allMenu().then(res=>{
    state.all_menu = res.data;
  })
});
const  handleSetPromise = ()=>{

}
const handleEdit = (index,item)=>{
  edit_visible.value  = true;
  state.edit_form = item;
}
const onSaveEdit = () => 
{


}
const handleUpdate = (index,item)=>{
  edit_visible.value  = true;
  state.edit_form = item;
}
const onSaveRoleAccess = () => 
{
  updatePermission({role_id:state.role_temp.id,access_ids:state.access}).then(res=>{

  });

}
const handleSetPremission = (index,item)=>{
  access_visible.value = true;
  state.role_temp = item;
  state.access = item.access_ids;
}
const handleSetMenu =(index,item) =>{
  menu_visible.value = true;
  state.role_temp = item;
  state.menu = item.menu_ids;
}
const onSaveMenu=()=>{
  updateMenu({role_id:state.role_temp.id,menu_ids:state.menu}).then(res=>{

  });
}

const onHandleSubmit = ()=>{
  create(state.form).then(res=>{
    if(res.code == 200) {
      visible.value = false;
    }
      ElMessage({
        message:'添加成功',
        type:'success',
      });
  });
}
</script>

<template>
 <el-row class="mb-4">
    <el-button type="success" @click="add">添加</el-button>
  </el-row>
   <el-table :data="state.roles" stripe style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="角色名" width="180" />
    <el-table-column fixed="right" label="操作" width="280">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="handleSetMenu(scope.$index,scope.row)">分配菜单</el-button>
       <el-button link type="primary" size="small" @click="handleSetPremission(scope.$index,scope.row)">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>

    <!-- 添加 -->
    <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">添加角色</h4>
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="角色名">
              <el-input v-model="state.form.name" />
            </el-form-item>
            
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSaveEdit">保存</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>

  <!-- 编辑 -->
  <el-dialog v-model="edit_visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">编辑角色</h4>
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="角色名">
              <el-input v-model="state.edit_form.name" />
            </el-form-item>
            
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onHandleSubmit">保存</el-button>
        <el-button type="danger" @click="edit_visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>
  <!-- 分配菜单 -->
   <el-dialog v-model="menu_visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">分配导航菜单</h4>
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
          <el-checkbox-group  v-model="state.menu" >
          
            <div v-for="(item,index) in state.all_menu" :key="index" :label="item.id">

                <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
                   <div v-if="item.children" style="margin-left:100px;">
                      <el-checkbox  v-for="(child,key) in item.children" :key="key" :label="child.id">{{child.name}}</el-checkbox>
                   </div>
                  <el-divider />
            </div>
          
          </el-checkbox-group>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSaveMenu">保存</el-button>
        <el-button type="danger" @click="menu_visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>
  <!-- 分配权限 -->
  <el-dialog v-model="access_visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">分配权限</h4>
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
        {{state.role_temp}}
        {{state.access}}

         <el-checkbox-group  v-model="state.access" >

            <el-checkbox v-for="(item,index) in state.all_access" :key="index" :label="item.id">{{item.name}}</el-checkbox>
         </el-checkbox-group>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSaveRoleAccess">保存</el-button>
        <el-button type="danger" @click="access_visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
